<script lang="ts">  
  import { writable } from 'svelte/store'; 
  import "../app.css"; 
  
  const from: any = writable('');  
  const to: any = writable('');  
  const cc: any = writable('');  
  const bcc: any = writable('');  
  const subject: any = writable('');  
  const body: any = writable('');  
  const src:string = "src/logo.png";
  function sendEmail() {  
    // Implement email sending logic or mock it  
    console.log(`Email sent from: ${from.value}, To: ${to.value}, CC: ${cc.value}, BCC: ${bcc.value}, Subject: ${subject.value}`);  
    // Display the email body  
    alert(`Email Body:\n${body.value}`);  
    
  }  
</script>  
  
<form class="h-max">
    <div class="flex flex-row p-1">
        <img src={src} alt="A man dances.">
        <div class="ml-1 text-xs align-middle">
            <div class="mt-3">TONGGULIN&lt;353198569@qq.com&gt;</div>
            <a href="" class="text-[#1e5494]">Home page</a> | <a href=""  class="text-[#1e5494]">Settings</a>
         </div>
    
    </div>
    <div class="h-max border-2 border-black flex  bg-[#89b5e9]">
        <div class="h-screen w-52 p-2 m-2 bg-white rounded-md">
            <ul>
                <li class="mt-1 flex border-b-2 px-1">
                  <i class="size-5 px-4" style="background-position:0px -1px;background-image:url(src/spirit.png)" src=""></i>
                Outbox</li>
                <li class="mt-1 flex border-b-2 px-1">
                  <i class="size-5 px-4" style="background-position:0px -31px;background-image:url(src/spirit.png)" src=""></i>
                Inbox</li>
                <li class="mt-1 flex border-b-2 px-1">
                  <i class="size-5 px-4" style="background-position:0px -61px;background-image:url(src/spirit.png)" src=""></i>
                Contacts</li>
            </ul>
            <div></div>
        </div>
        <div class="h-screen bg-[#eff5fb] rounded-md p-2 m-2 w-full">
            <div class="mt-1">  
                <label class="inline-block min-w-24" for="from">From:</label>  
                <input class="w-4/5 ml-1 rounded-sm shadow-inner shadow-sm	" type="email" id="from" bind:value={$from} />  
            </div>
            <div class="mt-1 ">  
                <label class="inline-block min-w-24" for="to">To:  </label>  
                <input class="w-4/5 rounded-sm ml-1 shadow-inner shadow-sm	" type="email" id="to" bind:value={$to} />  
            </div>  
            <div class="mt-1 ">  
                <label class="inline-block min-w-24" for="to">Bcc:  </label>  
                <input class="w-4/5 rounded-sm ml-1 shadow-inner shadow-sm	 " type="email" id="to" bind:value={$to} />  
            </div>  
            <div class="flex flex-row mt-1  h-1/2">  
                <label class="inline-block min-w-24 mt-0" >Email Body:</label>  
                <textarea class="h-full ml-2 w-4/5 shadow-inner shadow-sm	">{body.value}</textarea>  
            </div>  
            <button class="border-solid border-2 border-[#888888] bg-[#ffffff] rounded-sm p-2 " type="button" on:click={sendEmail}>Send Email</button>
        </div>
    </div>
   
</form>  
  

  
<style>  
  /* Use Tailwind CSS classes here */  
</style>